<template>
  <div @click="clickHide" class="c-pf c-p-t0 c-p-r0 c-w100 c-pz10000 c-pt6 c-pr10 c-flex-row c-justify-end">
    <article class="c-fs20">
      <div class="c-flex-row c-justify-end c-pr20">
        <div class="tip"></div>
      </div>
      <section class="c-ww480 c-hh290 c-translucent-balck80 c-br10 c-ph24 c-fc-white">
        <div class="c-fs24 c-pt30 c-pb20">{{guideWrite || '收藏店铺，定制专属的学习入口'}}</div>
        <div class="c-flex-row c-aligni-center c-pb20">
          <div class="c-pr20 c-flex-grow1 c-w0">
            <div class="c-fc-sgray c-lh32">
              方法一：
            </div>
            <div class="c-pt10 c-lh32">将店铺添加至【我的收藏】</div>
          </div>
          <img class="c-ww60 c-hh60" src="@/assets/icon_collection.png" alt="">
        </div>
        <div class="c-flex-row c-aligni-center c-pb20">
          <div class="c-pr20 c-flex-grow1 c-w0">
            <div class="c-fc-sgray c-lh32">
              方法二：
            </div>
            <div class="c-pt10 c-lh32">将店铺添加至浮窗</div>
          </div>
          <img class="c-ww60 c-hh60" src="@/assets/icon_float.png" alt="">
        </div>
      </section>
    </article>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      guideWrite: '',
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let companyAuth = localStorage.getItem("companyAuth") && JSON.parse(localStorage.getItem("companyAuth"));
      this.guideWrite = companyAuth && companyAuth.guideWrite;
    },
    clickHide() {
      this.$store.commit('updateShowGuide', false);
    },
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.tip {
  width: 0;
  height: 0;
  border-width: 0 0.25rem 0.25rem;
  border-style: solid;
  border-color: transparent transparent rgba(0, 0, 0, 0.8);
}
</style>
